<template>
    <div class="popCustomer-select">
        <searchBoxAll
            :searchform="searchform2"
            :search_type_data="search_type_data"
            :preselection_list="preselection_list"
            :placeholder="select_name"
            :resultTips_list="resultTips_list"
            :customer_list_data="customer_list_data"
            :top_num="top_num_search"
            :total="total_num"
            @cheSelectvalue="cheSelectvalue"
            @showSelectFun="showSelectFun"
            @preselectionFun="preselectionFun"
            @resultTipsFun="resultTipsFun"
            @determineFun="determineFun"
            @inputFun="inputFun"
            @closeFun="closeFun"
            @loadFun="searchloadFun"
            @accountLogin="accountLogin"
            ref="searchBoxAll"
        ></searchBoxAll>
        <div class="select-custom-box">
            <selectCustom
                ref="selectCustom1"
                :option_list="custype_ls_data"
                :select_id="searchform.typeid"
                :top_num="top_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '1')"
                @openSelect="openSelect('1')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom2"
                :option_list="order_ls_data"
                :select_id="searchform.orderby"
                :top_num="top_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '2')"
                @openSelect="openSelect('2')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom3"
                :option_list="ucp_ls_data"
                :select_id="searchform.uid_cp"
                :top_num="top_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '3')"
                @openSelect="openSelect('3')"
            ></selectCustom>
        </div>
        <div
            class="list-box"
            v-infinite-scroll="loadFun"
            v-if="list_data.length > 0"
            :style="{ height: `calc(100vh - ${list_box_h}px)` }"
        >
            <div
                class="list-row"
                v-for="item in list_data"
                :key="item.id"
                @click="determineFun(item)"
            >
                <div class="img-box">
                    <img v-if="item.avatar" :src="item.avatar" alt="" />
                    <span v-else>{{ item.name.split("")[0] }}</span>
                </div>
                <div class="info-box">
                    <div class="title">
                        <span>{{ item.name }}</span>
                        <span v-if="item.company">-{{ item.company }}</span>
                    </div>
                    <div class="phone">
                        <span>{{ item.cellphone }}</span>
                    </div>
                    <div class="tiem">
                        <span>{{ item.title }}：</span>
                        <span v-if="searchform.orderby == 6">{{
                            item.value
                        }}</span>
                        <span v-else
                            >{{ item.orders ? item.orders : "无"
                            }}{{ searchform.orderby == 4 ? "笔" : "" }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import popSearchup from "@/components/comm/popSearchup.vue";
import selectCustom from "@/components/comm/selectCustom.vue";
import searchBoxAll from "@/components/comm/searchBoxAll.vue";

import empty from "../comm/empty.vue";

export default {
    name: "popCustomerSelect",
    components: { popSearchup, empty, selectCustom, searchBoxAll },
    props: ["top_num_search", "top_num_screen", "list_box_h"],
    data() {
        return {
            is_soll: true,
            is_search: false,
            list_data: [],
            searchform: {
                typeid: "all",
                orderby: "",
                uid_cp: "",
                is_yy: "1",
                pfrom: -20,
                pnum: 20,
            },
            search_soll: false,
            searchform2: {
                exact: "1",
                // grade: 0,
                kw: "",
                objtype: "name",
                pfrom: 0,
                typeid: "",
                pnum: "20",
            },
            isExact: 2, // 1是精准 2是模糊
            search_type_data: [], //搜索类型
            preselection_list: [], //搜索分类提示
            resultTips_list: [], //模糊搜索列表
            customer_list_data: [], //搜索结果
            select_name: "", //搜索类型名称
            total_num: 0, //搜到的数量
            custype_ls_data: [
                {
                    title: "全部类别",
                    id: "all",
                },
            ],
            order_ls_data: [
                {
                    name: "全部排序",
                    id: "",
                },
            ],
            ucp_ls_data: [
                {
                    name: "全部经手人",
                    uid: "",
                    id: "",
                },
            ],
        };
    },

    methods: {
        initData() {
            this.resetList();
            this.getSearchtypeList();
            if (this.ucp_ls_data.length == 1) {
                this.getUcpls();
            }
        },
        // 获取搜索框焦点
        searchfocusFun(){
            this.$refs.searchBoxAll.focusFun()
        },
        getshowStatus(){
            return this.$refs.searchBoxAll.is_data_show_list
        },
        setshowStatus(){
            this.$refs.searchBoxAll.searchFun()
        },
        // 切换搜索类型
        cheSelectvalue(item) {
            this.searchform2.objtype = item.code;
            this.search_type_data.map((v) => {
                if (item.code == v.code) {
                    v.is_acitve = true;
                    this.select_name = v.name;
                } else {
                    v.is_acitve = false;
                }
            });
        },
        // 关闭搜索状态
        closeFun() {
            this.searchform2.kw = "";
        },
        // 搜索结果列表滚动加载
        searchloadFun() {
            if (this.search_soll) return;
            this.searchform2.pfrom += 20;
            this.getsearchResultFun();
        },
        // 回车搜索
        accountLogin() {
            this.isExact = 2; // 回车改为模糊
            this.resetSearchData();
            this.getsearchResultFun();
        },
        // 选中模糊搜索结果
        resultTipsFun(item) {
            this.isExact = 1;
            this.resetSearchData();
            this.searchform2.kw = item.title;
            this.getsearchResultFun();

        },
        // 搜索的分类筛选
        preselectionFun(item) {
            this.resetSearchData();
            this.searchform2.typeid = item.id;
            this.searchform2.kw = item.title;
            this.getsearchResultFun();
        },
        // 重置搜索的数据
        resetSearchData() {
            this.total_num = 0;
            this.customer_list_data = [];
            this.searchform2.pfrom = 0;
            this.searchform2.typeid = "";
            this.search_soll = false;
        },
        // 获取搜索结果
        async getsearchResultFun() {
            console.log(this.searchform2.typeid,'23333')
            this.search_soll = true;
            let exact = this.searchform2.typeid ? 2 : 1;
            let url = config.SEARCH_S_CUSTOMER;

            if (this.searchform2.typeid) {
                let exact = this.searchform2.typeid ? 2 : 1;
            } else {
                exact = this.isExact
            }

            let param = {
                exact: exact,
                nait: 233,
                // exact: 2,
                // grade: 0,
                kw: this.searchform2.typeid ? "" : this.searchform2.kw,
                objtype: this.searchform2.objtype,
                typeid: this.searchform2.typeid,
                pfrom: this.searchform2.pfrom,
                pnum: "20",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.custom_ls) {
                this.customer_list_data = this.customer_list_data.concat(
                    res.data.custom_ls
                );
                setTimeout(() => {
                    this.search_soll = false;
                }, 200);
            } else {
                this.search_soll = true;
            }
            this.total_num = res.data.total;
        },
        // 搜索输入
        async inputFun() {
            let url = config.SEARCH_S_OBJTYPE;
            let param = {
                ch: "custom",
                // grade: 0,
                kw: this.searchform2.kw,
                objtype: this.searchform2.objtype,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.resultTips_list = res.data.ls;
            }
            this.total_num = res.data.total;
        },

        // 获取搜索方式列表
        async getSearchtypeList() {
            let url = config.SEARCH_S_OBJTYPE_LS;
            let param = { ch: "custom", grade: 0 };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.es_ls) {
                    res.data.es_ls.map((v) => {
                        v.is_acitve = false;
                    });
                    this.select_name = res.data.es_ls[0].name;
                    res.data.es_ls[0].is_acitve = true;
                    this.search_type_data = res.data.es_ls;
                }
                if (res.data.cat_ls) {
                    this.preselection_list = res.data.cat_ls;
                }
            }
        },

        // 搜索时关筛选
        showSelectFun() {
            this.$refs.selectCustom1.is_select_show = false;
            this.$refs.selectCustom2.is_select_show = false;
            this.$refs.selectCustom3.is_select_show = false;
        },
        cheOptionvalue(item, type) {
            if (type == 1) {
                this.searchform.typeid = item.id;
            } else if (type == 2) {
                this.searchform.orderby = item.id;
            } else if (type == 3) {
                this.searchform.uid_cp = item.id;
            }
            this.changeList();
        },
        openSelect(type) {
            for (let i = 1; i < 4; i++) {
                if (i != type) {
                    this.$refs[`selectCustom${i}`].is_select_show = false;
                }
            }
        },
        // 搜索的数据
        searchList(data) {
            this.list_data = data.list;
            this.is_soll = data.is_soll;
            this.searchform.pfrom = data.pfrom;
            this.is_search = true;
        },

        // 确认选择客户
        determineFun(item) {
            this.$emit("getCustomerData", item);
            this.dialogVisible = false;
        },

        // 滚动加载
        loadFun() {
            console.log('123');
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            if (this.is_search) {
                this.$refs.popSearchup.loadFun(this.searchform.pfrom);
            } else {
                this.getlistdata();
            }
        },

        // 重置
        resetList() {
            // this.$refs.popSearchup.objtypeform = {
            //     objtype: "name",
            //     kw: "",
            // };
            this.searchform = {
                typeid: "all",
                orderby: "",
                uid_cp: "",
                // is_yy: "1",
                pfrom: 0,
                pnum: 20,
            };
            this.emptyData();
            this.getlistdata();
        },

        // 筛选客户
        changeList() {
            this.emptyData();
            this.getlistdata();
        },

        // 获取客户列表
        async getlistdata() {
            let url = config.CUSTOM_LS;
            let param = this.searchform;
            this.is_soll = true;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.custype_ls) {
                    this.custype_ls_data =
                        this.custype_ls_data.length == 1
                            ? this.custype_ls_data.concat(res.data.custype_ls)
                            : this.custype_ls_data;
                }
                if (res.data.order_ls) {
                    this.order_ls_data =
                        this.order_ls_data.length == 1
                            ? this.order_ls_data.concat(res.data.order_ls)
                            : this.order_ls_data;
                }
                if (res.data.custom_ls) {
                    this.list_data = this.list_data.concat(res.data.custom_ls);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },

        // 获取经手人
        async getUcpls() {
            let url = config.UCP_LS;
            let param = {
                md: "yy",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                res.data.map((v) => {
                    v.id = v.uid;
                });
                this.ucp_ls_data =
                    this.ucp_ls_data.length == 1
                        ? this.ucp_ls_data.concat(res.data)
                        : this.ucp_ls_data;
            }
        },

        // 清空数据
        emptyData() {
            this.searchform.pfrom = 0;
            this.list_data = [];
            this.is_soll = false;
            this.is_search = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.popCustomer-select {
    position: relative;
    height: 100%;
    .select-custom-box {
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
    }
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }
    .list-box {
        height: calc(100vh - 190px);
        overflow: auto;
        .list-row {
            padding: 10px 0;
            padding-left: 10px;
            border-bottom: 1px #f2f2f2 solid;
            display: flex;
            cursor: pointer;
            .img-box {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 5px;
                background: #eaeaea;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                span {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .info-box {
                .title {
                    font-size: 14px;
                }
                .phone {
                    font-size: 12px;
                    color: #9c9a9a;
                    margin: 5px 0;
                }
                .tiem {
                    font-size: 12px;
                }
            }
            &:hover {
                background: #fdf6f6;
            }
        }
    }
    .list-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .list-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .list-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
}
</style>